<template>
  <div class="toolbar">
    <div class="toolbar-container">
      <div class="toolbar_start">
        <div class="icons">
          <el-button
            circle
            @click="refresh()"
            text
            :class="{ refreshing }"
            v-if="theme.showRefresh"
            :icon="Refresh"></el-button>
        </div>
        <breadcrumbs />
      </div>
      <div class="toolbar_center" v-if="hasCenter">
        <el-input placeholder="Please enter">
          <template #append>
            <Search />
          </template>
        </el-input>
      </div>
      <div class="toolbar_end">
        <div class="flex align-center">
          <el-button :icon="Lock" circle text @click="emit('lock')" v-if="theme.showLock" />
          <el-button :icon="Search" circle text @click="hasCenter = !hasCenter" v-if="theme.showSearch" />
          <el-badge :value="5" v-if="theme.showMessage" :offset="[-5, 5]" style="margin: 0 10px">
            <el-button :icon="Remind" circle text @click="goPathForName('system_notice')" />
          </el-badge>
          <el-button :icon="isFull ? OffScreen : FullScreen" circle text v-if="theme.showSize" @click="fullScreen" />
          <el-button :icon="Translate" circle text v-if="theme.showIn18" />
        </div>

        <el-avatar src="http://comicui.cn/image/avatar.png" />
        <el-dropdown @command="command">
          <template #default
            ><div>{{ userInfo?.username }}<Down /></div>
          </template>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="user" :icon="User">个人中心</el-dropdown-item>
              <el-dropdown-item command="gitee" :icon="Link">源码地址</el-dropdown-item>
              <el-dropdown-item divider command="logout" :icon="LinkRight">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="toolbar-tools" v-if="theme.showTabs">
      <tab-list></tab-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useThemeStore, useUserStore } from '@/store';
import { PropType, ref } from 'vue';
import { useRouter } from 'vue-router';
import { TAB_LIST } from '@/utils/constant';
import tabList from './tab-list.vue';
import breadcrumbs from './breadcrumb.vue';
import { useFullScreen } from '@/utils/tools/full-screen';
import {
  Down,
  OffScreen,
  FullScreen,
  Link,
  LinkRight,
  Refresh,
  Lock,
  Search,
  Remind,
  Translate,
  User
} from '@icon-park/vue-next';

const props = defineProps({
  refreshPage: Function as PropType<(...args: any) => void>
});

const emit = defineEmits(['lock']);

const dropdownMenuFn = {
  user: () => {
    router.push({ name: 'personal_user' });
  },
  gitee: () => {
    let a = document.createElement('a');
    a.href = 'https://gitee.com/stop-chen/element-admin';
    a.target = '_blank';
    a.click();
    a.remove();
  },
  logout: () => {
    localStorage.removeItem(TAB_LIST);
    clearUserInfo();
    router.push({ name: 'login' });
  }
};
const refreshing = ref(false);

const router = useRouter();

const { userInfo, clearUserInfo } = useUserStore();
const { theme } = useThemeStore();

const { isFull, fullScreen } = useFullScreen();

const hasCenter = ref(false);

function command(sign: keyof typeof dropdownMenuFn) {
  dropdownMenuFn[sign]();
}

function goPathForName(name) {
  router.push({ name });
}

function refresh() {
  refreshing.value = true;
  props.refreshPage();
  setTimeout(() => {
    refreshing.value = false;
  }, 1000);
}
</script>

<style lang="scss" scoped>
.toolbar {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border-bottom: 1px solid var(--admin-border-color);
}
.toolbar-container {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  > div {
    padding: 0 40px;
  }
  .toolbar_start {
    display: flex;
    align-items: center;

    .icons {
      padding-right: 20px;
    }
  }

  .toolbar_center {
    padding: 0 50px;
    flex: 1;
  }

  .toolbar_end {
    display: flex;
    align-items: center;
    gap: 25px;
    height: 100%;
    font-size: 16px;

    .platte {
      width: 24px;
      cursor: pointer;
      transition: all 200ms;
      &:hover {
        filter: drop-shadow(0 0 2px #40596b);
      }
    }
  }
}
.toolbar-tools {
  height: 40px;
  border-top: 1px solid var(--admin-border-color);
}
</style>
